<template>
    <div>
      <div>
        <title-go-back :title="topTitle"></title-go-back>
      </div>
      <div class="process">
        <div v-for="item in process">
          <div class="quan_quan">
            <i class="iconfont icon-fangzidaiquan"></i>
          </div>
          <div>{{item.title}}</div>
          <div class="number_weituo">{{item.number}}</div>
        </div>
      </div>
      <div class="back_image">
        <img src="../../assets/image/weutuo.png" alt="">
      </div>
      <div class="weituo_talk">
        <div>房屋委托</div>
        <div>让您的房子更快的找点合适的人</div>
      </div>
      <div class="button_go">
        <button @click="goTwoHousePage">委托出售</button>
        <button @click="$router.push('/EntrustingRenting')">委托出租</button>
      </div>
    </div>
</template>

<script>
  import TitleGoBack from '../../components/common/TitleGoBack';
  export default {
    name: 'WeiTuoHouse',
    data(){
      return{
        topTitle:'房屋委托',
        process:[
          {title:'在线委托',number:1},
          {title:'电话核实',number:2},
          {title:'房源上架',number:3},
        ]
      }
    },
    created(){
      this.$store.commit('setCircleOfFriendsTitle','房屋委托');
      this.$store.commit('setCircleOfFriendsDesc','房屋委托');
    },
    methods:{
      goTwoHousePage(){
        this.$router.push({name:'WeiTuoTwoHouse'})
      }
    },
    components: {TitleGoBack}
  }
</script>

<style scoped>
.process{
  display: flex;
  padding: 20px 0;
  position: relative;
}
  .process>div{
    width: calc(100% / 3);
    text-align: center;
    font-size: 0.9rem;
  }
  .quan_quan .iconfont{
    font-size: 2rem;
    z-index: 1;
  }
.back_image{
  margin: 20px auto;
  text-align: center;
}
  .weituo_talk{
    text-align: center;
  }
  .weituo_talk>div:nth-child(1){
    font-size: 1rem;
    color: #666;
  }
  .weituo_talk>div:nth-child(2){
    font-size: 0.8rem;
    color: #999;
  }
.button_go{
  display: flex;
  justify-content: center;
}
  .button_go>button{
    margin: 20px;
    height: 2rem;
    width: 5rem;
    color: #999;
    /*border-radius: 5px;*/
  }
  .number_weituo{
    font-size: 1.2rem;
    color: #e6191e;
  }
</style>
